<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="账号管理">
        <a-form :model="formState">
          <a-row :gutter="32">
            <a-col :span="6">
              <a-form-item label="手机号">
                <a-input
                  v-model:value="formState.username"
                  placeholder="输入手机号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="账号名称">
                <a-input
                  v-model:value="formState.nickName"
                  placeholder="输入账号名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="账号角色">
                <a-select
                  ref="select"
                  v-model:value="formState.roleId"
                  style="width: 100%"
                  placeholder="选择账号角色"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in roleList"
                    :value="item.roleId"
                    >{{ item.roleName }}</a-select-option
                  >
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="账号状态">
                <a-select
                  ref="select"
                  v-model:value="formState.state"
                  style="width: 100%"
                  placeholder="选择账号状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in stateEnum.data"
                    :value="item.value"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleAdd">新建</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
        </div>
      </a-card>
      <a-card>
        <a-table
          :columns="accoutsColumns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'state'">
              <a>
                {{ stateEnum.getNameByValue(record.state) }}
              </a>
            </template>
            <template v-if="column.key === 'roleName'">
              <a>
                {{ record.roleName ? record.roleName.join(",") : "" }}
              </a>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">编辑</a-button>
                <a-popconfirm
                  :title="`您是否要${
                    record.state == 2 ? '启用' : '禁用'
                  }此条数据?`"
                  @confirm="handleStatus(record)"
                >
                  <a-button v-if="record.state == 1" danger type="primary"
                    >禁用</a-button
                  >
                  <a-button v-else type="primary"
                    >启用</a-button
                  >
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <addModal
      v-if="show"
      :show="show"
      :title="title"
      :roleList="roleList"
      :dataList="dataList"
      @handleSave="handleSave"
      @handleCancel="handleCancel"
    />
  </div>
</template>
<script setup>
import { accoutsColumns } from "./columns.js";
import stateEnum from "@/enums/stateEnum.js";
import addModal from "./components/addModal.vue";
import { getUserList, getRoleList, editUser } from "@/api/system";
import { ref, onMounted } from "vue";

const dataSource = ref([]);
const show = ref(false);
const title = ref("");
const dataList = ref({});
function handleAdd() {
  dataList.value = {};
  show.value = true;
  title.value = "新建账号";
}
function handleEdit(record) {
  dataList.value = record;
  show.value = true;
  title.value = "修改账号";
}
function handleSave() {
  show.value = false;
  getUserInfoList();
}
function handleCancel() {
  show.value = false;
}
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  roleId: undefined,
  nickName: "",
  state: undefined,
  username: "",
});
const getUserInfoList = async () => {
  const data = await getUserList(formState.value);
  if (data.code == 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getUserInfoList();
}
function handleStatus(record) {
  console.log(record.state);
  editUser({
    roleId: record.roleId,
    nickName: record.nickName,
    username: record.username,
    id: record.id,
    state: record.state == 1 ? 2 : 1,
  }).then(() => {
    getUserInfoList();
  });
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    nickName: "",
    state: "",
    username: "",
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getUserInfoList();
}
function handleTableChange(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getUserInfoList();
}
const roleList = ref([]);
const getRoleListFn = async () => {
  const data = await getRoleList({ page: 1, pageSize: 999 });
  if (data.code == 200) {
    roleList.value = data.data.list.filter(val => val.state == 1);
  }
};
onMounted(() => {
  getRoleListFn();
  getUserInfoList();
});
</script>
<style lang="less">
.ant-table-thead > tr > th {
  background-color: #f3f5f7 !important;
}
.ant-table-thead > tr > th::before {
  width: 0 !important;
}
</style>
